<template>
  <view>
    <!-- 顶部年月 -->
    <view class="flexr-jsb flex-aic ptb8r plr18r bgwhite bbs2r">
      <view class='hw64r fcenter' @tap="calDate.use ? dataBefor(-1) : ''">
        <i-icon type="zuo" size='42' color='#8F8F94' v-if="calDate.use"></i-icon>
      </view>
      <view class="f28r c555">
        {{canlenderData.year || 2020}}年{{canlenderData.month || 1}}月
      </view>
      <view class="hw64r fcenter" @tap="calDate.end ? dataBefor(1) : ''">
        <i-icon type="you" size='42' color='#8F8F94' v-if="calDate.end"></i-icon>
      </view>
    </view>
    <!-- 日历表 -->
    <view class="plr28r bgwhite h420r-min">
      <!-- 星期 -->
      <view class="flexr-jsb">
        <view class="day">日</view>
        <view class="day">一</view>
        <view class="day">二</view>
        <view class="day">三</view>
        <view class="day">四</view>
        <view class="day">五</view>
        <view class="day">六</view>
      </view>
      <!-- 日 -->
      <block v-for="(week, weekIndex) in canlenderData.weeks" :key="weekIndex">
        <view class="flexr-jsb">
          <view class="day" :class="{'day-signin':day.signin, 'day-disable': day.disable}" v-for="(day,dayIndex) in week"
            :key="dayIndex">
            {{day.date}}
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
  import {
    getSignInDateList
  } from "@/api/HanbiServer.js"

  /**  
   * 签到日历组件
   * @property {Object} date 指定日期  
   */
  export default {
    name: 'signin-calendar',

    props: {
      // 指定日期
      date: {
        type: String,
        default: ''
      },
    },

    data() {
      return {
        // 日历数据
        canlenderData: {},
        // 当前年月日
        year: '',
        month: '',
        day: '',
        // 截止最新签到时间为当年当月
        endYear: '',
        endMonth: '',
        endDay: '',
        // 签到开通时间
        useDate: new Date().toISOString(),
        useYear: '',
        useMonth: '',
        useDay: '',
      }
    },

    computed: {
      // 计算日期范围上下翻
      calDate() {
        let use = true
        let end = true
        if (this.year == this.endYear && this.month == this.endMonth) end = false
        if (this.year == this.useYear && this.month == this.useMonth) use = false
        return {
          use,
          end
        }
      }
    },
    created() {
      this.init()
    },

    methods: {
      /// 初始化年月日
      init() {
        // 取日期对象
        let now = this.date ? new Date(this.date) : new Date()
        this.year = now.getFullYear()
        this.month = now.getMonth() + 1
        this.day = now.getDate()
        // 最新签到年月
        this.endYear = now.getFullYear()
        this.endMonth = now.getMonth() + 1
        this.endDay = now.getDate()
        // 获取签到日历
        this.fnSignInDate()
      },
      /// 获取签到日历
      fnSignInDate(date = '') {
        getSignInDateList(date).then(dateRes => {
          this.useDate = dateRes.data.Remark.userdate
          // 保存签到日历记录信息
          this.$store.commit('setSigninDateData', dateRes.data.Data)
          // 刷新日历
          this.canlenderData = this.getCanlender(`${this.year}-${this.month}-${this.day}`)
          // 用户最多回看年月日
          let _useDate = new Date(dateRes.data.Remark.userdate)
          this.useYear = _useDate.getFullYear()
          this.useMonth = _useDate.getMonth() + 1
          this.useDay = _useDate.getDate()
        })
      },

      /// 切换前一月 -1|| 后一月 1
      dataBefor(id) {
        // 前一个月
        if (id == -1) {
          this.month = Number(this.month) - 1
          if (this.month == 0) {
            this.month = 12
            this.year = Number(this.year) - 1
          }
        }
        // 后一个月
        if (id == 1) {
          this.month = Number(this.month) + 1
          if (this.month >= 13) {
            this.month = 1
            this.year = Number(this.year) + 1
          }
        }
        // 获取签到日历
        this.fnSignInDate(`${this.year}/${this.month}/1`)
      },
      /// 获取日历内容周分组
      getCanlender(dateData) {
        // 判断当前是 安卓还是ios ，传入不容的日期格式
        if (typeof dateData !== 'object') {
          dateData = dateData.replace(/-/g, '/')
        }
        // 获取年，月，日，星期
        let _date = new Date(dateData)
        let year = _date.getFullYear()
        let month = _date.getMonth() + 1
        let date = _date.getDate()
        let day = _date.getDay()
        // 日期数据对象
        let dates = {
          firstDay: new Date(year, month - 1, 1).getDay(),
          lastMonthDays: [], // 上个月末尾几天
          currentMonthDys: [], // 本月天数
          nextMonthDays: [], // 下个月开始几天
          endDay: new Date(year, month, 0).getDay(),
          weeks: []
        }
        // 循环上个月末尾几天添加到数组
        for (let i = dates.firstDay; i > 0; i--) {
          const beforeDate = new Date(year, month - 1, -i + 1).getDate() + ''
          dates.lastMonthDays.push({
            date: beforeDate,
            month: month - 1,
            disable: true,
            isDay: false
          })
        }
        // 循环本月天数添加到数组
        for (let i = 1; i <= new Date(year, month, 0).getDate(); i++) {
          // 确认签到日期
          let signin = this.$store.getters['getSigninDateData'].some(item => {
            let _dataArr = item.SigninDate.split(' ')[0].split('-');
            return (year == _dataArr[0] && month == _dataArr[1] && i == Number(_dataArr[2]));
          });
          //
          dates.currentMonthDys.push({
            date: i + '',
            month: month,
            signin: signin,
            disable: false,
            isDay: dateData == year + '/' + month + '/' + i
          })
        }
        // 循环下个月开始几天 添加到数组
        const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
        for (let i = 1; i < surplus + 1; i++) {
          dates.nextMonthDays.push({
            date: i + '',
            month: month + 1,
            disable: true,
            isDay: false
          })
        }
        // 拼接数组  上个月开始几天 + 本月天数+ 下个月开始几天
        let canlender = [].concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
        // 日历分周
        for (let i = 0; i < canlender.length; i++) {
          if (i % 7 === 0) {
            dates.weeks[parseInt(i / 7)] = new Array(7)
          }
          dates.weeks[parseInt(i / 7)][i % 7] = canlender[i]
        }
        return {
          weeks: dates.weeks,
          month: month,
          date: date,
          day: day,
          year: year,
          lastDate: dates.currentMonthDys[dates.currentMonthDys.length - 1].date
        }
      },
      //
    },
  }
</script>

<style>
  .h420r-min {
    min-height: 420rpx;
  }

  .day {
    width: 64rpx;
    height: 64rpx;
    line-height: 54rpx;
    font-size: 24rpx;
    color: #8F8F94;
    text-align: center;
  }

  .day-signin {
    color: #FF6699;
    border: 2px #FF6699 solid;
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box;
  }

  .day-disable {
    color: #EEEEEE;
  }
</style>
